<template>
  <div class="nav">
     <router-link to="/login">
       <van-nav-bar left-arrow fixed title="忘记密码" class="wjpwd"></van-nav-bar>
    </router-link>
     <img src="http://www.zlllcy.com/fuben/f7.png" alt="">
    <div class="center">
    <van-cell-group>
      <van-field
        v-model="phone"
        :border="true"
        required
        label="手机号"
        placeholder="请输入您的手机号"
      />
      <van-field
        v-model="sms"
        center
        required
        clearable
        :border="false"
        label="验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            @click="gainCode"
            :disabled="disabled"
            class="btncode"
            size="small"
            type="warning"
            >{{ time }}</van-button
          >
        </template>
      </van-field>
      <!-- 密码 -->
      <div class="pwd">
        <van-field
          v-if="isShow"
          v-model="pwd"
          required
          type="password"
          @blur.native.capture="checkPwd"
          :state="pwdState"
          label="密码"
          placeholder="请输入6到15位数字"
        />
        <van-field
          v-else
          v-model="pwd"
          required
          @blur.native.capture="checkPwd"
          :state="pwdState"
          label="密码"
          placeholder="请输入6到15位数字"
        />
        <van-icon
          v-if="isReg"
          class="eye"
          name="closed-eye"
          @click="eye"
          size="1.5rem"
        />
        <van-icon v-else class="eye" name="eye-o" @click="eye" size="1.5rem" />
      </div>

      <!-- 确认密码 -->
      <div class="confirmPwd">
        <div class="left">
          <van-field
            v-if="isShowpwd"
            v-model="confirmPwd"
            required
            type="password"
            @blur.native.capture="checkPwd"
            :state="confirmPwdState"
            label="确认密码"
            placeholder="请输入6到15位数字"
          />
          <van-field
            v-else
            v-model="confirmPwd"
            required
            @blur.native.capture="checkPwd"
            :state="confirmPwdState"
            label="确认密码"
            placeholder="请输入6到15位数字"
          />
        </div>
        <div class="right">
          <van-icon
            v-if="is_Reg"
            class="eye1"
            name="closed-eye"
            @click="clickeye"
            size="1.5rem"
          />
          <van-icon
            v-else
            class="eye1"
            name="eye-o"
            @click="clickeye"
            size="1.5rem"
          />
        </div>
      </div>
    </van-cell-group>

    <!-- 按钮 -->
    <div class="btn">
      <van-button type="primary" @click="checkReupwd" size="large"
        class="btnPwd">确认重置密码</van-button
      >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClick: true,
      phone: "",
      time: "发送验证码",
      sms: "", //用于验证码做双向数据绑定
      pwd: "", //用于密码框做双向数据绑定
      pwdState: "",
      checked: false,
      isShow: true, //默认显示密码框
      isReg: true, //默认显示闭眼
      isShowpwd: true,
      confirmPwd: "",
      confirmPwdState: "",
      is_Reg: true,
      disabled: false,
      code: "", //用于保存后端传过来的验证码
    };
  },
  methods: {
    //点击眼睛切换显示或隐藏密码
    eye() {
      this.isReg = !this.isReg;
      if (this.isReg == true) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
     eye1() {
      this.isReg = !this.isReg;
      if (this.isReg == true) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
     },
    //点击眼睛切换显示或隐藏确认密码
    clickeye() {
      this.is_Reg = !this.is_Reg;
      if (this.is_Reg == true) {
        this.isShowpwd = true;
      } else {
        this.isShowpwd = false;
      }
    },
    checkPwd() {
      //验证密码是否符合要求
      let reg = /^\w{6,15}$/; //6到15位数字
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    // 获取验证码
    gainCode() {
      //正则表达式验证手机号
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(this.phone)) {
        let s = 60;
        // this.time = s + 's'
        let interval = setInterval(() => {
          s--;
          this.time = s + "s";
          this.disabled = true;
          if (s < 0) {
            this.time = "重新获取";
            this.isClick = true;
            clearInterval(interval);
            this.disabled = false;
          }
        }, 1000);
      } else {
        this.$toast("输入正确的手机号");
        return;
      }
      // 发送获取验证码请求
      this.axios.post("/user/sms", `phone=${this.phone}`).then((result) => {
        // console.log(result.data); //返回验证码
        this.code = result.data; //保存后端返回的验证码
      });
    },
    //注册表单验证
    checkReupwd() {
      // 判断手机号是否为空
      if (this.phone == "") {
        this.$toast("手机号不能为空！");
        return;
      }

      //判断用户输入的验证码跟获取到的验证码是否一致或者是否为空
      if (this.sms != this.code || this.sms == "") {
        this.$toast("验证码为空或输入不正确！");
        return;
      }
      //判断密码是否为空
      if (this.pwd == "") {
        this.$toast("密码不能为空！");
        return;
      }
      //判断密码跟确认密码是否一致
      if (this.pwd != this.confirmPwd || this.confirmPwd == "") {
        this.$toast("密码不一致或为空！");
        return;
      }
      //console.log('注册成功！');
      // 发送put请求，传递参数：phone upwd sms confirmPwd
      // console.log(this.phone, this.pwd, this.sms);
      this.axios
        .put(
          "/user/reupwd",
          `phone=${this.phone}&upwd=${this.pwd}&sms=${this.sms}&reupwd=${this.confirmPwd}`
        )
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.$toast("修改成功");
            this.$router.push("/login");
          } else if (res.data.code == 201) {
            this.$toast("修改失败");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/scss/public.scss";
.btncode{
  background-color: #a0ccff;
  border: 1px solid #a0ccff;
}
img {
  width: 100%;
}
 .van-nav-bar{
    background-color: white !important;
  }
  .van-icon{
    font-size: 16px !important;
    margin-left: 16px;
  }

.nav{
  text-align: center;
  margin-top: 2rem;

.confirmPwd {
  // background-color: skyblue !important;
  display: flex;
  .right{
    margin-left: 33px;
  }
   .pwd{
    margin-left: 33px;
  }
}
.wjpwd{
  color:gray !important;
}


.eye {
  position: absolute;
  top: 110px;
  // margin-top: 0.3rem !important;
  margin-left: 145px;
  font-size: 16px !important;
}
// 按钮框
// .btn {
//   // padding-left: 75px;
// }
.btnPwd{
    margin: 0 auto !important;
    display: block !important;
    margin-top: 1rem !important;
    height: 33px;
    width: 268px;
    border-radius: 5px;
    background-color: #1989fa;
    border: .0625rem solid #1989fa;
}
}
</style>
